image map

Probleem

Syntaxis

<img src="DesktopWithBooks.gif" alt="Desktop" width="800px" height="600px" border="0" usemap="#Desktop"/>
<map id="Desktop" name="Desktop">
<area shape="rect" coords="20, 10, 266, 400" href="PastOpen.html" alt="Open Past"/>
<area shape="rect" coords="290, 10, 580, 400" href="PresentOpen.html" alt="Open Present"/>
<area shape="rect" coords="600, 10, 800, 400" href="FutureOpen.html" alt="Open Future"/>
<area shape="rect" coords="500,0,311,24" href="map1d.html" alt="Box"/>
<area shape="rect" coords="500,0,390,24" href="map1e.html" alt="Watch"/>
</map>

Om een image map te maken moet je aan het <img> element naast het scr attribuut ook het usemap attribuut toevoegen. Het usemap attribuut specificeert de verwijzing naar een "map", waarin de browser de informatie over de image map kan vinden.

Het begin en einde van de "map" zelf wordt bepaald met het <map> element. Het <map> element moet een id attribuut hebben met dezelfde waarde als het usemap van het <img> element.

In xhtml moet je het id attribuut gebruiken, maar om compatibel te zijn met oudere browsers stel best ook het name attribuut van het map element in op de zelfde waarde als van het id attribuut.

In het <map> element bepalen we één of meer <area> elementen. Elk <area> element bepaalt een gebied met behulp van de attributen shape voor de vorm, coords voor de coördinaten en href voor bestemming. Met het alt attribuut kan je omschrijving van de bestemming weergeven als een tooltip. als je het nohref in plaats van het href opneemt, geef je aan dat klikken in het betreffende gebied niet tot een andere bestemming moet leiden.

Met het shape attribuut van het <area> element kunnen drie vormen van gebieden worden vastgelegd. De wijze waarop in het coords attribuut de coördinaten van een gebied vastgelegd worden hangt af van de vorm:

• rechthoek (rect): de waarde van het coords attribuut bevat vier getallen:
  • de positie van de linker bovenhoek in horizontale richting,
  • de positie van de linkerbovenhoek in verticale richting,
  • de positie van de rechter benedenhoek in horizontale richting,
  • de positie van de rechter benedenhoek in verticale richting
• veelhoek (poly): de waarde van het coords attribuut bevat voor een aantal hoekpunten een coördinatenpaar, waarbij voor elk hoekpunt eerst de positie in horizontale en vervolgens de positie in verticale richting wordt opgenomen;
• cirkel (circle): het coords attribuut bevat 3 getallen:
  • de horizontale of X positie van het middelpunt van de cirkel
  • de verticale of Y positie van het middelpunt van de cirkel
  • de lengte van de straal.

In alle gevallen wordt in horizontale richting (X) gemeten vanaf de linkerkant en in verticale richting (Y) vanuit de bovenkant van de afbeelding.

De afstand is in pixels. Je moet de attributen width en heigth van het <img> element ook in pixels vastleggen (en geen percentage).

Bij het bepalen van de coördinaten is het handig gebruik te maken van een image-viewer/editor. IrfanView is een gratis programma. Wanneer je in dit programma op een punt in de afbeelding klikt, kun je links in de titelbalk van het venster de X- en Y-positie van het punt aflezen.